<template>
  <div>
    <transition name="wordAnimation">
      <div class="wordMain" v-if="wordIsShow">
        <div class="wordOver">
          <div class="wordList" :style="wordListStyle">
            <div class="word" v-for="(item,index) in wordCurrentList" :key="index">
              <div>
                <span v-for="(items,index) in imagerySplit(item)" :class="{wordImageryLight:wordImagery===items}"
                  :style="wordStyle(items)" :key="index">{{items}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <div class="wordIcon" :style="iconStyle" @touchend="wordIconTouch"></div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      wordIsShow: true,
      delayTimer: null,
      loopTimer: null,
      wordCurrentIndex: 0,
      wordTransition: ""
    }
  },
  mounted() {
    this.wordAudioPause()
    this.wordAudioPlay()
    this.picbookAudioPlay()
  },
  computed: {
    iconStyle() {
      return {
        bottom: this.wordIsShow ? "6rem" : "1rem"
      }
    },
    wordListStyle() {
      return {
        height: this.wordCurrentList.length * 4 + "rem",
        transform: "translateY(-" + this.wordCurrentIndex * 4 + "rem)",
        transition: this.wordTransition
      }
    },
    wordStyle(item) {
      return function (item) {
        if (this.imageryIndex.indexOf(item) > -1) {
          return {
            color: 'rgb(251, 152, 80)'
          }
        }
      }
    },
    //获取当前页完整旁白
    wordCurrentList() {
      return this.word[this.contentIndex].split("\n")
    },
    //获取当前页所有意向
    imageryIndex() {
      //遍历意向数组 获取eryPage为当前页面索引的意向
      return this.imageries.filter(item => { return item.eryPage === this.contentIndex + 1 }).map(item => { return item.explain })
    },
    //旁白意向拆分
    imagerySplit: function (str) {
      return function (str) {
        let split = []
        this.imageryIndex.map(item => {
          const index = str.lastIndexOf(item)
          if (index >= 0) {
            split.push(index)
            split.push(index + item.length)
          }
        })
        //首尾添加index
        split.unshift(0)
        split.push(str.length)
        //➡由小到大排序
        split.sort(function (a, b) {
          return a > b ? 1 : -1
        })
        return split.map((item, index) => {
          return str.slice(split[index - 1], item)
        }).filter(item => { return item })
      }

    },
    indexPicbookAudio() {
      return this.picbookAudio[this.contentItem[this.contentIndex].id]
    },
    ...mapGetters("contentStatus", {
      contentIndex: "getContentIndex",
      contentItem: "getContentItem",
      picbookAudio: "getPicbookAudio"
    }),
    ...mapGetters("picbookListStatus", {
      picbookIndex: "getPicbookIndex",
      picbookList: "getPicbookList"
    }),
    ...mapGetters("wordStatus", {
      word: "getWord",
      wordImagery: "getWordImagery"
    }),
    ...mapGetters("imageryStatus", {
      imageries: "getImageryItem"
    }),
  },
  methods: {
    //播放
    wordAudioPlay: function () {
      this.parseTextAudio({
        text: this.wordCurrentList[this.wordCurrentIndex],
        speaker: this.picbookList.filter(item => { return item.id === this.picbookIndex.id })[0].detail.speaker,
        start: () => {
          if (this.indexPicbookAudio && this.indexPicbookAudio.volumeAside) {
            this.picbookAudioMusic({
              volume: this.indexPicbookAudio.volumeAside / 100
            })
          }
        },
        end: () => {
          if (this.wordCurrentIndex === this.wordCurrentList.length - 1) {
            if (this.indexPicbookAudio && this.indexPicbookAudio.volumeNotAside) {
              this.picbookAudioMusic({
                volume: this.indexPicbookAudio.volumeNotAside / 100
              })
            }
          }
          else {
            this.wordTransition = "all 0.4s"
            this.wordCurrentIndex++
            this.wordAudioPlay()
          }
        }
      })
    },
    //暂停
    wordAudioPause: function () {
      this.parseTextAudio({
        play: false
      })
      if (this.indexPicbookAudio && this.indexPicbookAudio.volumeNotAside) {
        this.picbookAudioMusic({
          volume: this.indexPicbookAudio.volumeNotAside / 100
        })
      }
    },
    //播放绘本音效
    picbookAudioPlay: function () {
      let delayTime = 100, loopTime = 100
      if (this.indexPicbookAudio && this.indexPicbookAudio.triggerStyle.type === "loopDelayed") {
        delayTime = this.indexPicbookAudio.triggerStyle.delayMs
        loopTime = this.indexPicbookAudio.triggerStyle.intervalMs
      }
      const loopPlay = () => {
        this.picbookAudioMusic({
          src: this.indexPicbookAudio.audioUrl
        }).then(() => {
          this.loopTimer = setTimeout(() => { loopPlay() }, loopTime)
        })
      }
      if (this.indexPicbookAudio) {
        this.delayTimer = setTimeout(() => { loopPlay() }, delayTime)
      }
    },
    clearTimer: function () {
      clearTimeout(this.delayTimer)
      clearTimeout(this.loopTimer)
    },
    //点击播放 /暂停
    wordIconTouch: function () {
      this.clickMusic()
      this.wordIsShow = !this.wordIsShow
      this.wordIsShow ? this.wordAudioPlay() : this.wordAudioPause()
    },
  },
  beforeDestroy() {
    this.clearTimer()
  },
  watch: {
    //监听绘本翻页
    contentIndex: function (index) {
      this.clearTimer()
      this.wordTransition = "all 0s"
      this.wordCurrentIndex = 0
      this.picbookAudioPlay()
      this.wordIsShow = true
      this.wordAudioPlay()
    }
  }
};
</script>

<style scoped lang='stylus'>
.wordIcon
  $coord('WHRB', 3rem, 3rem, 2.2rem, 6rem)
  transform translate3d(var(--X), var(--Y), 0)
  background url($urlTitle + 'icon/icon-语音.png') 0 0 / 100% 100%
  z-index 99
  transition all 0.4s
.wordMain
  $coord('WHLB', 46rem, 8.5rem, 1rem, -3rem)
  background url($urlTitle + 'index/旁白背景.png') 0 0 / 100% 100%
  color rgb(185, 137, 113)
  font-size 1rem
  box-sizing border-box
  padding-top 2rem
  transform translate3d(calc(0px - var(--X)), var(--Y), 0)
  z-index 99
  .wordOver
    $coord('WHLT', 46rem, 7.5rem, 0rem, 1rem)
    overflow hidden
    .wordList
      $coord('WHLT', 42rem, 4rem, 2.2rem, 0rem)
      .word
        width 42rem
        height 4rem
        float left
        text-align left
        display flex
        align-items center
        text-align justify
        div
          line-height 1.2rem
          text-indent 1.6rem
        .wordImageryLight
          animation wordLight 1.2s
          transition color 0.5s
@keyframes wordLight
  0%
    color rgb(251, 152, 80)
  80%
    color red
  100%
    color rgb(251, 152, 80)
</style>
